<script setup lang="ts">
import {useClassName} from '@project/utils'

defineOptions({name: 'ProBtn'})

const props = defineProps<{ type?: string }>()

const {cls} = useClassName('btn')

const btnCls = {
  [cls()]: true,
  [cls(props.type || '')]: !!props.type,
}
</script>

<template>
  <button :class="btnCls">
    <slot>按钮</slot>
  </button>
</template>

<style scoped>
.pro-btn {
  color: gray;
}

.pro-btn-default {
  color: black;
}

.pro-btn-primary {
  color: red;
}
</style>